<template>
  <view class="swiper-wrap">
		<swiper :interval="300" class="swiper-container" :current="currentIndex" @change="handleChange">
			<swiper-item class="swiper-item" v-for="(swiper, swiperIndex) of swiperList" :key="swiperIndex">
				<scroll-view scroll-y class="scroll-item">
					<view class="total-class">
						<image src="/static/images/class/class.png"></image>
						<view class="desc">当天共有<text>{{swiper.length}}</text>节课</view>
					</view>
					<view v-for="(item, index) of getMorningList(swiper)" :key="index" class="item-class">
						<view class="title section">
							<view>第{{getClassNum(index)}}节课</view>
							<view class="time">{{item.courseStartTime}} - {{item.courseEndTime}}</view>
						</view>
						<view class="class-name title">{{item.dictName}}</view>
						<view class="name title">{{item.teacherName}}</view>
					</view>
					<view v-if="swiper.length > 4" class="total-class">
						<image src="/static/images/class/rest.png"></image>
						<view class="desc">休息</view>
					</view>
					<view v-for="(item, index) of getAfterList(swiper)" :key="index" class="item-class">
						<view class="title section">
							<view>第{{getClassNum(index)}}节课</view>
							<view class="time">{{item.courseStartTime}} - {{item.courseEndTime}}</view>
						</view>
						<view class="class-name title">{{item.dictName}}</view>
						<view class="name title">{{item.teacherName}}</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
export default {
  name: 'swiperClass',
	props: {
		currentIndex: {
			type:Number,
			default: 0
		},
		swiperList: {
			type:Array,
			default() {
				return []
			}
		}
	},
  data() {
    return {
			list: [0,1,2,3,4,5,6,7]
    }
  },
	computed:{
	},
	watch:{
		currentIndex: {
			handler: function(index) {
				// console.log(index)
			},
			immediate: true
		}
	},
	methods: {
		handleChange(e) {
			const index = e.detail.current
			this.$emit('update:currentIndex', index)
		},
		getClassNum(index) {
			const num = ['一', '二', '三', '四', '五', '六', '七', '八']
			return num[index]
		},
		getMorningList(list) {
			return list.slice(0,4)
		},
		getAfterList(list) {
			return list.slice(4)
		}
	}
}

</script>
<style lang='scss' scoped>
.swiper-wrap{
  width: 100%;
  height: calc(100vh - 480upx);
  background-color: #f0f0f0;
	.swiper-container{
		width: 100%;
		height: 100%;
		.scroll-item{
			width: 100%;
			height: 100%;
			padding: 0 20upx 20upx;
			box-sizing: border-box;
			.total-class{
				width: 100%;
				height: 120upx;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width:63upx;
					height:63upx;
					margin-right: 20upx;
				}
				.desc{
					font-size: 30upx;
					color: #999;
					font-weight: bold;
					text{
						color:#2C6DD2;
					}
				}
			}
			.item-class{
				width:100%;
				height:120upx;
				background:rgba(255,255,255,1);
				border-radius:10upx;
				margin-bottom: 20upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 42upx;
				box-sizing: border-box;
				.title{
					font-size:25upx;
					color: #333;
					width: 200upx;
					text-align: center;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
				.name{
					text-align: right;
				}
				.section{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.time{
						color: #999;
						font-size: 25upx;
					}
				}
			}
		}
	}
}
</style>